<template>
    <div class="contentBox1">
        <!-- <div class="contentBox1_p1">去去去去去去去去去去去七七七七七七七七</div>
        <div class="contentBox1_p2">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇呜呜呜呜呜呜呜呜呜</div>
        <div class="contentBox1_p3">
            <div class="flex">
                <img src="../../assets/ChargeTaskLabel_icon1.png">
                <p>随即部署，安全可靠</p>
            </div>
        </div> -->

        <transition name="slide-down">
            <div v-if="showBox1" class="contentBox1_p1">高效沟通方案</div>
        </transition>
        <transition name="slide-down1">

            <div v-if="showBox2" class="contentBox1_p2">定向科室消息精准推送、全面覆盖院内沟通需求。</div>
        </transition>
        <transition name="slide-down2">
            <div v-if="showBox3" class="contentBox1_p3">
                <div class="flex">
                    <img src="../../assets/ChargeTaskLabel_icon1.png">
                    <p>信息传递 无缝高效</p>
                </div>
            </div>
        </transition>

    </div>
</template>

<script>



export default {
    data() {
        return {
            showBox1: false,
            showBox2: false,
            showBox3: false,
        }
    },
    mounted() {
        this.animateBoxes();
    },
    methods: {

        async animateBoxes() {
            // 控制每个 box 的动画延迟
            await this.showBoxWithDelay("showBox1", 300); // 立即显示
            await this.showBoxWithDelay("showBox2", 1000); // 延迟 1 秒
            await this.showBoxWithDelay("showBox3", 1000); // 延迟 1 秒
        },
        showBoxWithDelay(box, delay) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    this[box] = true;
                    resolve();
                }, delay);
            });
        },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.contentBox1 {
    position: relative;
}

.contentBox1_p1 {
    color: #0279FF;
    font-size: 38px;
    font-size: max(25px, min(3vw, 38px));
    font-weight: bold;
    width: 100%;
    white-space: nowrap;
    /* position: absolute; */
}

.contentBox1_p2 {
    color: #007EFF;
    font-size: 19px;
    font-size: max(14px, min(2vw, 19px));
    margin: 13px 0 20px 0;
    width: 100%;
    white-space: nowrap;
    /* position: absolute; */
}

.contentBox1_p3 {
    color: #2D4C5E;
    font-size: 14px;
    width: 100%;
    white-space: nowrap;
    /* position: absolute; */
}

.contentBox1_p3 img {
    width: 20px;
    height: 15px;
    margin-right: 10px;
}



.slide-down-enter-active,
.slide-down-leave-active,
.slide-down1-enter-active,
.slide-down1-leave-active,
.slide-down2-enter-active,
.slide-down2-leave-active {
    position: absolute;
    transition: all 0.85s linear;
    /* transition: all 0.85s cubic-bezier(0.34, 1.56, 0.64, 1); */
    /* transition: all 0.85s cubic-bezier(0.68, -0.55, 0.27, 1.55); */
}

.slide-down-enter-from {
    top: -100%;
    /* transform: scale(0); */
}

.slide-down-enter-to {
    top: 0%;
    /* transform: scale(1); */
}

.slide-down1-enter-from {
    top: -100%;
    /* transform: scale(0); */
}

.slide-down1-enter-to {
    top: 0%;
    /* transform: scale(1); */
}

.slide-down2-enter-from {
    top: -100%;
    /* transform: scale(0); */
}

.slide-down2-enter-to {
    top: 0%;
    /* transform: scale(1); */
}
</style>